<template>
  <div class='box'>
    <div class="navicBox" style="border-bottom: 3px solid #eee;margin: 5px 0;position: relative;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item style="font-size: 18px; color: #000;">查看日志</el-breadcrumb-item>
        <el-breadcrumb-item style="line-height:20px;">日志详情</el-breadcrumb-item>
        <input type="button" class="changeLogBtn" value="修改" @click="changeLogDetails"/>
        <div class='share'>分享：
          <div class='qrCode'>
            <div class='code' ref='code'></div>
          </div>
          <div class='shareSina' title='分享到qq空间' @click='shareQq'></div>
          <div class='shareQq' title='分享到微博' @click='shareSina'></div>
        </div>
      </el-breadcrumb>
    </div>
    <div class="logBox" style="padding: 3%;width: 800px; margin-left: 10%;">
      <div >
        <div class="logName" style="font-size: 22px; margin: 2% 0;border-top: 3px solid #eee;padding-top: 3%;">{{result.logName}}</div>
        <p class="firstP">所属迭代：<b>{{result.sprint}}</b></p>
        <p>团队：<b>{{result.group}}</b></p>
        <p>发布人：<b>{{result.publishName}}</b></p>
      </div>
      <div v-html='result.logContent' style="border-bottom: 3px solid #eee;"></div>
    </div>
  </div>
</template>

<script>
import { _getLogDetails } from '../common/api'
export default {
  data () {
    return {
      result: {
        logName: '',
        sprint: '',
        group: '',
        publishName: '',
        sub: [],
        logContent: `<h2>迭代目标：</h2><p><br></p ><p><br></p ><p><br></p ><h2><strong>完成情况：</strong></h2><h3><br></h3><p><br></p ><h2><strong>优缺点：</strong></h2><h3><br></h3><p><br></p ><p><br></p ><h2><strong>收获：</strong></h2><h3><br></h3><p><br>`
      }
    }
  },
  created () {
    this.getLogDetails()
  },
  mounted () {
    this.getQrCode()
  },
  methods: {
    getQrCode () {
      const url = 'http://bshare.optimix.asia/barCode?site=weixin&url=' + location.href
      let dom = this.$refs.code
      dom.style.background = `url(${url})`
      dom.style.backgroundSize = `contain`
    },
    changeLogDetails () {
      var logId = this.$route.query.logId
      this.$router.push(`/newLog?logId=${logId}`)
    },
    getLogDetails () {
      let logId = this.$route.query.logId
      _getLogDetails({logId: logId}).then(res => {
        this.result.logContent = res.logContent
        this.result.logName = res.logName
        this.result.sprint = res.sprintName
        this.result.group = res.groupName
        this.result.publishName = res.logOperator
      })
    },
    shareQq () {
      const title = this.result.sprint
      const url = location.href
      const picurl = ''
      var str = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=' + title + '&url=' + url + '&pics=' + picurl
      window.open(str, 'newwindow', 'height=400,width=400,top=100,left=100')
    },
    shareSina () {
      const title = this.result.sprint
      const url = location.href
      const picurl = ''
      var str = 'http://v.t.sina.com.cn/share/share.php?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl
      window.open(str, 'newwindow', 'height=400,width=400,top=100,left=100')
    }
  }
}
</script>

<style scoped lang="sass">
    .navicBox
        background: #fff
        padding: 20px 50px
        margin: 20px 0
    .logName
        width: 100%
        text-align: center
    p
      margin: 20px 30px
      text-align: center
      font-size: 16px
      display: inline-block
      background: rgba(225, 234, 222, 0.58)
      border: 0px solid rgba(124, 160, 115, 0.58)
      padding: 10px
    .firstP
      margin-left: 10%
    .mainBody
      width: 80%
      margin: 0 auto
    .content
      width: 100%
      letter-spacing: 2px
      line-height: 23px
      margin: 3% 0%
    .share
      position: absolute
      line-height: 33px
      top: 43%
      left: 69%
      height: 33px
      color: #3c8dbc
      .shareSina
        cursor: pointer
        height: 17px
        width: 17px
        transform: translateY(8px)
        margin-left: 10px
        float: right
        background: url(https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2976047483,2307003534&fm=58)
      .shareQq
        background: url(//cdn.meifz.com/mfz-website/img/icons/share_sina.png)
        cursor: pointer
        height: 18.6px
        float: right
        width: 19.2px
        background-position-y: calc(-19px)
        transform: translateY(7px)
      .qrCode
        background: url(http://bshare.optimix.asia/barCode?site=weixin&url=http://192.168.29.159/aa)
        cursor: pointer
        height: 16.6px
        margin-left: 5px
        background-size: contain
        float: right
        transform: translateY(8px)
        width: 16.2px
        .code
          display: none
          background-size: contain
        &:hover .code
          display: block
          height: 150px
          width: 150px
          position: absolute
          top: 250%
          left: -400%
    .changeLogBtn
      position: absolute
      top: 43%
      left: 64%
      cursor: pointer
      width: 57px
      height: 33px
      color: #3c8dbc
</style>
